<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <script type="text/javascript">
        function start() {
            PF('startButton1').disable();

            window['progress'] = setInterval(function() {
                var pbClient = PF('pbClient'),
                oldValue = pbClient.getValue(),
                newValue = oldValue + 10;

                pbClient.setValue(pbClient.getValue() + 10);

                if(newValue === 100) {
                    clearInterval(window['progress']);
                }


            }, 1000);
        }

        function cancel() {
            clearInterval(window['progress']);
            PF('pbClient').setValue(0);
            PF('startButton1').enable();
        }
        </script>
    </h:head>
    <h:body>
        <h:form>  
            <p:growl id="growl" />

            <h3>Client ProgressBar</h3>
            <p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
            <p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
            <p />
            <p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>
            
            <h3>Ajax ProgressBar</h3>
            <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
            <p:commandButton value="Cancel" actionListener="#{progressBarBean.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
            <p />
            <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarBean.progress}" labelTemplate="{value}%" styleClass="animated" global="false">
                <p:ajax event="complete" listener="#{progressBarBean.onComplete}" update="growl" oncomplete="startButton2.enable()"/>
            </p:progressBar>

            <h3>Static Display</h3>
            <p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
        </h:form>
    </h:body>
</html>
